<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="24">
        <!-- 用户选择提示 -->
        <span>选择用户：</span>
        <el-select v-model="selectedUser" placeholder="用户" @change="handleUserChange" style="width: 90%;">
          <el-option
              v-for="user in users"
              :key="user.id"
              :label="user.name"
              :value="user.id">
          </el-option>
        </el-select>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="24">
        <!-- 用户角色选择提示 -->
        <span>选择用户角色：</span>
        <el-cascader
            v-model="selectedRoles"
            :options="rolesOptions"
            :props="{ multiple: true, checkStrictly: true, emitPath: false }"
            placeholder="用户角色"
            style="width: 90%;">
        </el-cascader>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="24">
        <!-- 确认按钮 -->
        <el-button type="primary" @click="submitUserRole">确认</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>

import {selectRole, selectRoleById, selectUser} from "@/http/home/user/get"
import {updateUserRoles} from "@/http/home/user/post";

export default {
  data() {
    return {
      // 省略其他数据属性以保持简洁
      selectedUser: null, // 当前选中的用户
      selectedRoles: [], // 选中的角色
      users: [], // 所有用户
      rolesOptions: [], // 角色选项
    };
  },
  mounted() {
    this.fetchUsers();
    this.fetchRoles();
  },
  methods: {
    // 省略其他方法以保持简洁
    fetchUsers() {
      // 调用API获取所有用户
      selectUser(null,1,1000).then(res => {
        this.users = res.data.data.records
      })
    },
    fetchRoles() {
      // 调用API获取所有角色，并格式化为级联选择器需要的格式
      selectRole().then(res => {
        this.rolesOptions = res.data.data
      })
    },
    handleUserChange(value) {
      // 当选中的用户变化时，更新selectedRoles为该用户已有的角色
      this.getUserRoles(value)
    },
    getUserRoles(userId) {
      selectRoleById(userId).then(res => {
        if (res.data.code == 200) {
          this.selectedRoles = res.data.data.map(item => item.roleId)
        }
      })
    },
    submitUserRole() {
      // 构造要发送到后端的数据
      const payload = {
        userId: this.selectedUser,
        roleIds: this.selectedRoles,
      };

      if (!this.selectedUser || !this.selectedRoles.length) {
        this.$message.error('请确保选择了用户和至少一个角色');
        return; // 提前返回，不执行后续代码
      }

      // 调用API发送数据到后端进行处理
      // 假设API方法名为 updateUserRoles，需要根据你的实际API进行替换
      updateUserRoles(payload).then(res => {
        if (res.data.code === 200) {
          this.$message.success('用户角色更新成功');
        } else {
          this.$message.error('用户角色更新失败');
        }
      }).catch(error => {
        console.error('更新用户角色出错:', error);
        this.$message.error('更新用户角色出错');
      });
    },
  },
};
</script>
